<template>
  <transition name="slide">
        <header class="my-header">
          <div class="my-header-wrapper">
        	  <p class="seting">
        	  	<router-link to='/seting' tag='span' class='iconfont icon-buzhi'>设置</router-link>
        	    <span class="iconfont icon-qdao" @click="signIn">签到</span>
        	  </p>
        	<p class="xiaoxi">
        	  <span class="iconfont icon-xiaoxi"></span> 
        	</p>
        </div>
          <div class="wrapper-username">
        	<div class="login-username">
        	  <span @click="personalmeg(username)">{{username}}</span>
        	  <span class="iconfont icon-huiyuan">高级会员</span>
        </div>
        <div class="login-Picture">
        	<img src="http://imgsrc.baidu.com/imgad/pic/item/d52a2834349b033b6be8d3e61ece36d3d539bdad.jpg"/>
        </div>
        </div>
        </header>

  </transition>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'mint-ui';

Vue.use(Toast)
export default {
	data () {
		return {
			username:localStorage.getItem('usn')
		}
	},
	methods:{
		personalmeg (username) {
			this.$router.push({
  			name: 'personalmessage' ,
  			params: { username }
  		})
		},
		signIn () {
			Toast({
          message: '恭喜您签到成功+2积分',
          position: 'middle',
          duration: 1000
        });
		}
	}
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.tips{
	width:300px;
	height:300px;
}
.my-header{
	@include rect(100%, 1.44rem);
  @include background-color(#ccc);
  @include flexbox();
  @include flex-direction(column);
  justify-content: flex-start;
	.my-header-wrapper{
	  @include rect(100%, 0.54rem);
    @include background-color(#ccc);
    @include flexbox();
    @include text-color(#000);
    @include line-height(0.44rem);
    justify-content:space-between;
    .icon-buzhi{
    	margin-left:8px;
    	font-size: 15px;
    }
    .icon-xiaoxi{
    	font-size: 20px;
    	margin-right:8px;
    }
  }
  .wrapper-username{
  	@include rect(100%, 0.34rem);
    @include background-color(#ccc);
    @include flexbox();
    justify-content:center;
  	  .login-username{
	    @include rect(2.0rem, 0.6rem);
	    @include background-color(#ccc);
	    @include flexbox();
	    @include flex-direction(column);
	    @include text-color(#fff);
	    .icon-huiyuan{
	    	font-size:12px;
	    	color:ccc
	    }
    }
    .login-Picture{
	    	  img{
	    	  	width: 0.5rem;
	    	  	height:0.5rem;
	    	  	border:1px solid #fff;
	    	    border-radius: 50%;
	    	  }
	    }
  }
 
}
</style>
